<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
			Vue监视数据的原理：
				1. vue会监视data中所有层次的数据。

				2. 如何监测对象中的数据？
								通过setter实现监视，且要在new Vue时就传入要监测的数据。
									(1).对象中后追加的属性，Vue默认不做响应式处理
									(2).如需给后添加的属性做响应式，请使用如下API：
													Vue.set(target，propertyName/index，value) 或
													vm.$set(target，propertyName/index，value)

				3. 如何监测数组中的数据？
									通过包裹数组更新元素的方法实现，本质就是做了两件事：
										(1).调用原生对应的方法对数组进行更新。
										(2).重新解析模板，进而更新页面。

				4.在Vue修改数组中的某个元素一定要用如下方法：
							1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
							2.Vue.set() 或 vm.$set()

				特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
		-->
<div id="root">
    <h1>学生信息</h1>
    <button @click="student.age.rAge++;student.age.sAge++;">年龄+1</button>
    <button @click="addGender">添加性别</button>
    <button @click="student.gender = '未知'">修改性别</button>
    <button @click="addFriend">添加朋友</button>
    <button @click="updateFirstFriendName">修改第一个朋友的名字为“张三”</button>
    <button @click="addHobby">添加一个爱好</button>
    <button @click="updateFirstHobby">修改第一个爱好为“开车”</button>
    <button @click="removeSmoke">移除爱好中的“抽烟”</button>
    <h2>学生姓名：{{student.name}}</h2>
    <h2 v-if="student.gender">性别：{{student.gender}}</h2>
    <h2>学生年龄：真实：{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
    <h2>爱好：</h2>
    <ul>
        <li v-for="(h, index) in student.hobbies" :key="index">{{h}}</li>
    </ul>
    <h2>朋友们：</h2>
    <ul>
        <li v-for="(f, index) in student.friends" :key="index">
            {{f.name}}--{{f.age}}
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                school: {
                    name: 'abc',
                    address: '深圳',
                    principal: '小张',
                },
                student: {
                    name: 'Tom',
                    age: {
                        rAge: 40,
                        sAge: 29
                    },
                    hobbies: ["抽烟", "喝酒", "烫头"],
                    friends: [
                        {name: 'Jerry', age: 35},
                        {name: 'Tony', age: 36},
                    ]
                }
            }
        },
        computed: {},
        methods: {
            addGender(e) {
                // Vue.set(this.student, "gender", "男");
                this.$set(this.student, "gender", "男");
            },
            addFriend(e){
                this.student.friends.unshift({name: 'Jack', age: 70});
            },
            updateFirstFriendName(e){
                this.student.friends[0].name = "张三";
            },
            addHobby(e){
                this.student.hobbies.push("吃饭");
            },
            updateFirstHobby(e){
                // this.student.hobbies.splice(0, 1, "开车");
                //或
                this.$set(this.student.hobbies, 0, "开车");
            },
            removeSmoke(e){
                /*this.$set(this.student, "hobbies", this.student.hobbies.filter((h) => {
                    return h !== "抽烟";
                }));*/
                this.student.hobbies = this.student.hobbies.filter((h) => {
                    return h !== "抽烟";
                });
            }
        },
        watch: {}
    });
</script>
</html>